<template>
  <div class="app-container">
    <!-- 食品介绍 -->
    <el-card class="box-card">
      <h3>食品编辑</h3>
      <el-form ref="goods" :rules="rules" :model="goods" label-width="150px">
        <el-form-item label="食品名称" prop="foodName">
          <el-input v-model="goods.foodName"/>
        </el-form-item>
        <el-form-item label="食品价格" prop="foodPrice">
          <el-input v-model="goods.foodPrice" placeholder="0.00">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="食品图片">
          <el-upload
            ref="upload"
            :on-change="handleChangeFile"
            :headers="headers"
            :action="uploadPath"
            :show-file-list="false"
            :on-success="uploadPicUrl"
            class="avatar-uploader"
            accept=".jpg,.jpeg,.png,.gif"
          >
            <img v-if="goods.foodImg" :src="goods.foodImg" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
        </el-form-item>

        <el-form-item label="所属商家编号">
          <el-input v-model="goods.businessId"></el-input>
        </el-form-item>

        <el-form-item label="食品备注">
          <el-input v-model="goods.remarks"></el-input>
        </el-form-item>

        <el-form-item label="食品介绍">
          <editor :init="editorInit" v-model="goods.foodExplain"/>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 更新取消按钮 -->
    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleEdit">更新食品</el-button>
    </div>
  </div>
</template>

<style>
.el-card {
  margin-bottom: 10px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.input-new-keyword {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 145px;
  height: 145px;
  display: block;
}
</style>

<script>
import {detailGoods, editGoods, listCatAndBrand} from "@/api/goods/goods";
import {createStorage, uploadPath} from "@/api/system/storage";
import Editor from "@/components/TEditor.vue";
import {MessageBox} from "element-ui";
import {getToken} from "@/utils/auth";

export default {
  name: "GoodsEdit",
  components: {Editor},
  data() {
    return {
      uploadPath: process.env.VUE_APP_TARGET_API + "/upload", // 图片上传路径
      goods: {}, // 食品信息
      // 表单验证规则
      rules: {
        foodName: [
          {required: true, message: "食品名称不能为空", trigger: "blur"},
          {min: 2, max: 30, message: "食品名称长度必须在2-30之间", trigger: "blur"}
        ],
      },
      // 富文本编辑器初始化
      editorInit: {
        language: "zh_CN",
        convert_urls: false,
        plugins: [
          "advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount",
        ],
        toolbar: [
          "searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample",
          "hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen",
        ],
        // 上传钩子
        images_upload_handler: function (blobInfo, success, failure) {
          const formData = new FormData();
          formData.append("file", blobInfo.blob());
          createStorage(formData)
            .then((res) => {
              success(res.data.data.url);
            })
            .catch(() => {
              failure("上传失败，请重新上传");
            });
        },
      },
    };
  },
  computed: {
    // 上传请求头
    headers() {
      return {
        "Shopping-Admin-Token": getToken(),
      };
    },
  },
  created() {
    // 页面数据初始化
    this.init();
  },
  methods: {
    handleChangeFile(file, fileList) {
      if (!file) return
      // suffix：后缀名 ，如：hello.jpg
      var suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const limit = file.size / 1024 < 50
      if (suffix !== 'jpg' && suffix !== 'png' && suffix !== 'bmp') {
        this.$refs.upload.clearFiles()
        this.$message({
          message: '上传文件只能是 .jpg、.png、bmp格式!',
          type: 'warning'
        })
        return false
      }
      if (!limit) {
        this.$refs.upload.clearFiles()
        this.$message({
          message: '上传文件大小必须小于50KB!',
          type: 'warning'
        })
        return false
      }
    },
    // 获取数据 ，判断是否有食品id传入
    init: function () {
      if (this.$route.query.id == null) {
        return;
      }

      const goodsId = this.$route.query.id;

      detailGoods(goodsId).then((response) => {
        this.goods = response.data;
      });
    },

    // 更新食品钩子
    handleEdit: function () {
      // 构建提交数据
      const finalGoods = {
        goods: this.goods,
      };
      // 调用接口
      editGoods(finalGoods.goods)
        .then((response) => {
          this.$notify.success({
            title: "成功",
            message: "编辑食品成功",
          });
          this.$router.push({path: "/goods/index"});
        })
        .catch((response) => {
          MessageBox.alert("业务错误：" + response.data.errmsg, "警告", {
            confirmButtonText: "确定",
            type: "error",
          });
        });
    },

    // 取消更新食品
    handleCancel() {
      this.init();
      // console.log("-----cancel goods update 0000");
      // this.$router.go(0); // 刷新当前路由页面
      // let id = this.$route.query.id;
      // console.log("-----cancel goods id:%d", id);
      // this.$router.push({ path: "/goods/index" });
    },

    // 获取图片上传路径
    uploadPicUrl: function (response) {
      let fm = process.env.VUE_APP_IMAGE_SHOW_FORM;
      console.log("----edit food , fm : " + fm);
      if ("db" == fm) {
        this.goods.foodImg = response.data.url;
      } else if ("file" == fm) {
        this.goods.foodImg = process.env.VUE_APP_TARGET_API + response.data.url;
      }
    },
    // 限制上文件个数
    uploadOverrun: function () {
      this.$message({
        type: "error",
        message: "上传文件个数超出限制!最多上传5张图片!",
      });
    },


  },
};
</script>
